<style lang="less" scoped>
/deep/.el-dialog--center .el-dialog__body {
  padding: 20px 10px 28px!important;
}
/deep/.el-form-item__label {
  padding-right: 0;
}
.patient-info {
  table tr th { font-weight: bold }
  table,table tr th, table tr td { border:1px solid #EBEEF5; }
  table { width: 100%; min-height: 40px; line-height: 40px; text-align: center; border-collapse: collapse; padding:2px;}
}
</style>
<template>
  <el-dialog
  v-el-drag-dialog
    id="exchange"
    title="影像交换"
    :append-to-body='true'
    :visible.sync="exchangeShow"
    :before-close="ExchangeClose"
    width="750px"
    top="3%"
    center>
    <div class="of">
      <div class="patient-info">
        <table>
          <tr>
            <th>患者姓名</th>
            <th>性别</th>
            <th>医疗机构</th>
            <th>检查类型</th>
            <th>检查主键</th>
            <th>检查时间</th>
          </tr>
          <tr>
            <td>{{ getInfo('patient_name', 0) }}</td>
            <td>{{ getInfo('patient_sex', 0) | sexFilters }}</td>
            <td>{{ getInfo('institution_name', 0) }}</td>
            <td>{{ getInfo('modalities_in_study', 0) }}</td>
            <td>{{ getInfo('id', 0) }}</td>
            <td>{{ getInfo('study_date_time', 0) }}</td>
          </tr>
        </table>
      </div>
      <div class="tc mt10 mb10">
        <i class="iconfont clr_0a70b0" style="font-size: 28px">&#xe6cb;</i>
      </div>
      <div class="patient-info">
        <table>
          <tr>
            <th>患者姓名</th>
            <th>性别</th>
            <th>医疗机构</th>
            <th>检查类型</th>
            <th>检查主键</th>
            <th>检查时间</th>
          </tr>
          <tr>
            <td>{{ getInfo('patient_name', 1) }}</td>
            <td>{{ getInfo('patient_sex', 1) | sexFilters }}</td>
            <td>{{ getInfo('institution_name', 1) }}</td>
            <td>{{ getInfo('modalities_in_study', 1) }}</td>
            <td>{{ getInfo('id', 1) }}</td>
            <td>{{ getInfo('study_date_time', 1) }}</td>
          </tr>
        </table>
      </div>
      <el-alert
        title="确定要进行影像交换吗？"
        type="warning"
        center
        show-icon
        class="mt10 mb30"
        :closable="false">
      </el-alert>
      <div slot="footer" class="dialog-footer fr">
        <el-button @click="ExchangeClose" size="medium" class="mr20">取 消</el-button>
        <el-button type="primary" @click="ExchangeSubmit" size="medium">确 定</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      timeId: null
    }
  },
  props: ['exchangeShow', 'exchangeData'],
  computed: {
    getInfo () {
      return (itemName, idx) => {
        if (this.exchangeData[idx]) {
          return this.exchangeData[idx][itemName]
        } else {
          return ''
        }
      }
    }
  },
  filters: {
    sexFilters (val) {
      if (val) {
        if (val === 'M') {
          return '男'
        } else if (val === 'F') {
          return '女'
        }
      } else {
        return ''
      }
    }
  },
  methods: {
    ExchangeClose () {
      this.$emit('ExchangeClose', '')
    },
    async ExchangeSubmit () {
      let res = await this.$pacsApi.pacsApi.imgExchange(this.exchangeData[0]['id'], this.exchangeData[1]['id'])
      if (res.code === 0) {
        this.$message({
          type: 'success',
          message: '影像交换开始'
        })
        this.$store.commit('imgExchange/SET_ALERT_SHOW', true)
        this.$store.dispatch('imgExchange/pollingGetExchangeProgressRate') // 开始轮询
        this.ExchangeClose()
      }
    }
  }
}
</script>
